<template>
  <div class="container">
    <!-- <loading style="width:100%;height:100%;z-index:999999" ></loading> -->

     
    <Card class="login-wrapper" v-show="!modalAcross">
      <!-- <DatePicker 
      v-model="startTime"
      :value="startTime"
      format="yyyy-MM-dd"
     type="date" multiple placeholder="Select date" style="width: 300px"></DatePicker> -->

      <div slot="title" class="title">{{ $t("loginIndex.loginHint") }}</div>
      <!-- <div class="titleLeft" @click.stop="changLange">{{toggle}}</div> -->

      <Dropdown
        class="user-info"
        @on-click="handleFontClick"
        style="margin-right:30px"
      >
        <div>
          <span class="user-name">{{toggle}}</span>
        </div>
        <DropdownMenu slot="list">
          <DropdownItem name="Chinese">中文</DropdownItem>
          <DropdownItem name="English">English</DropdownItem>
          <DropdownItem name="traditional">中文繁體</DropdownItem>
          <DropdownItem name="Japanese">わぶん</DropdownItem>
          <DropdownItem name="Korean">한국어</DropdownItem>
        </DropdownMenu>
      </Dropdown>

      <Form
        ref="form"
        :model="formData"
        :rules="ruleInline"
      >
        <FormItem prop="username">
          <Input type="text" v-model="formData.username" :placeholder="$t('loginIndex.loginPhone')">
            <Icon type="ios-person-outline" slot="prepend"></Icon>
          </Input>
        </FormItem>
        <FormItem prop="password">
          <Input type="password" v-model="formData.password" :placeholder="$t('loginIndex.loginPassword')" @on-enter="handleSubmit">
            <Icon type="ios-lock-outline" slot="prepend"></Icon>
          </Input>
        </FormItem>
        <FormItem>
          <Button
            type="primary"
            long
            @click="handleSubmit"
          >{{ $t("loginIndex.loginHint") }}</Button>
        </FormItem>
        <FormItem v-show="showAuthorization==true">
          <Button
            type="success"
            long
            @click="modalAcross=true"
          >{{ $t("loginIndex.accredit") }}</Button>
        </FormItem>
      </Form>

      <div class="version">{{$t('versionIndex.verListVersion')}}：3.1-1124</div>
    </Card>
    <Card
      class="login-wrapper across"
      v-show="modalAcross"
      >
      <h3>{{$t("loginIndex.macnumTip4")}}</h3>
      <h5>{{$t("loginIndex.macnumTip5")}}</h5>
      <Steps direction="vertical" class="small">
        <Step status="process" :title="$t('loginIndex.getmacnum')" >
          <div slot="content">
            <!-- <div>{{getAcross}}</div> -->
            <!-- <Input readonly v-model="getAcross" :placeholder="$t('loginIndex.getmacnum')" style="width: 230px" /> -->
            <Input type="text" class="ipt" readonly search v-model="getAcross" :placeholder="$t('loginIndex.clickSearch')+$t('loginIndex.getmacnum')" @on-search="getAcrossData">
              <!-- <Icon type="ios-search" slot="suffix" /> -->
            </Input>
            <Button type="text" v-show="getAcross" size="small" class="smallBtn" v-clipboard:copy="getAcross"
        v-clipboard:success="onCopy"
        v-clipboard:error="onError">{{$t('loginIndex.copy')}}</Button>
          </div> 
        </Step>
        <Step status="process" :title="$t('loginIndex.macnumTip1')" :content="$t('loginIndex.macnumTip2')"></Step>
        <Step status="process" :title="$t('loginIndex.macnumTip3')"></Step>
        <Step status="process" :title="$t('loginIndex.macnumTip6')"></Step>
      </Steps>
      <Button
        :disabled="getAcross==''"
        type="primary"
        class="center"
        @click="closed"
      >{{ $t("loginIndex.activation") }}
      </Button>
      <Icon type="ios-close" slot="extra" size="34"  @click="modalAcross=false"/>
    </Card>
    <!-- <Modal
        class="modalClass"
        v-model="modalAcross"
        :title="$t('loginIndex.macnum')"
        >
        <div>{{$t('loginIndex.macnum')}}：{{getAcross}}</div>
        <div slot="footer"></div>
    </Modal> -->
  </div>
</template>

<script>
import {
  login,
  licenseVerify,
  getAcross
} from '@/api/public.js'
export default {
  data () {
    return {
      // startTime: ['2020-05-20','2020-05-21'],
      toggle: '中文',
      getAcross:'',
      modalAcross:false,
      showAuthorization:false,
      formData: {
        username: '',
        password: '',
      },
      ruleInline: {
        username: [
          {
            required: true,
            message: this.$t('loginIndex.loginPhoneHint'),
            trigger: 'blur',
          },
        ],
        password: [
          {
            required: true,
            message: this.$t('loginIndex.loginPassInput'),
            trigger: 'blur',
          },
          {
            type: 'string',
            min: 6,
            message: this.$t('loginIndex.loginPhoneMin'),
            trigger: 'blur',
          },
        ],
      },
    }
  },

  created(){

    if(localStorage.getItem('language')){
      if (localStorage.getItem('language') === 'zh' ) {
        this.toggle = "中文"
      }else if(localStorage.getItem('language') === 'en' ){
         this.toggle = "English"
      }else if(localStorage.getItem('language') === 'zf' ){
         this.toggle = "中文繁体"
      
      } else if (localStorage.getItem('language') === 'ja') {
        this.toggle = "わぶん"
      } else if (localStorage.getItem('language') === 'ko') {
        this.toggle = "한국어"
      }
      
    }else{
      let _this1 = this;
      if (_this1.$i18n.locale === 'zh' ) {
        this.toggle = "中文"
      }else if(_this1.$i18n.locale === 'en' ){
         this.toggle = "English"
      }else if(_this1.$i18n.locale === 'zf' ){
         this.toggle = "中文繁体"
      
      } else if (_this1.$i18n.locale === 'ja') {
        this.toggle = "わぶん"
      } else if (_this1.$i18n.locale === 'ko') {
        this.toggle = "한국어"
      }
    }
  },
  methods: {
    closed(){
      this.showAuthorization=false
      this.modalAcross=false
      // console.log('showAuthorization',this.showAuthorization)
    },
    // 复制成功
    onCopy(e){
       console.log("复制成功");
       this.$Message.success(this.$t('loginIndex.copy')+this.$t('staffIndex.staffDepaUser2'))
    },
    // 复制失败
    onError(e){
      console.log("失败");
      this.$Message.error(this.$t('loginIndex.copy')+this.$t('staffIndex.stafferror'))
    },
    async getlicenseVerify(){
      const { success, data } = await licenseVerify()
      if (success) {
        console.log(data)
        if (data.code == 500) {
          this.$Message.error("鉴权"+this.$t('staffIndex.stafferror'))
          return
        }
      }else{
        this.$Message.warning("鉴权"+this.$t('staffIndex.stafferror'))
        return
      }
    },
    async handleSubmit () {
      // console.log(this.startTime)
      // return
      const valid = await this.$refs.form.validate()
      if (valid) {
        
        const { success, data } = await login(this.formData)
        if (success) {
          window.localStorage.setItem("logo1",data.logo)
          // console.log("登陆成功请求的侧边栏菜单数据")
          // console.log(data)
          // #考勤管理
          // checkAttendanceSupport=1
          // #访客登记
          // visitorRegistration=1
          // #访客预约
          // visitorAppointment=0
          // #访客轨迹分析
          // visitorTrajectory=0
          // #访客权限管理
          // visitorAuthority=0
          // #身份证校验
          // visitorIdCardVerification=0
          // #测温异常邮件通知
          // mailForTempAbnormal=1
          // #考勤异常邮件通知
          // mailForChenkAbnormal=1
          // #访客拜访邮件通知
          // mailForVisitorRegistration=1
          // #异常操作邮件通知
          // mailForOperatorAbnormal=1
          // #数据大屏
          // bigDataView=0
          let data111=JSON.parse(JSON.stringify(data))
          let arr1=[]
          data111.menus.forEach((v, i) => {
            if(v.permission=='#attendance'){
              if(data111.license.checkAttendanceSupport==1){
                arr1.push(v)
              } 
            }else if(v.permission=='#visitors'){
              if(data111.license.visitorRegistration==1){
                arr1.push(v)
              } 
            }else if(v.permission=='#emailAdmin'){
              if(data111.license.mailForTempAbnormal==1){
                arr1.push(v)
              } 
            }else{
              arr1.push(v)
            }
          })
          data111.menus=arr1
          // console.log('处理权限后',data111,data)
          const result = await this.$store.dispatch('initAuth', data111)
          if (result) {
            // console.log('result')
            // console.log(result)

            //授权接口调用
            const data1 = await licenseVerify()
            if (data1.data.code == 500||data1.data=="授权文件不存在或已损坏") {
              this.$Message.error(this.$t('loginIndex.loginpwdCheck12'))
              this.showAuthorization=true
              return
            }

            if (data.menus.length > 0) {
              let MenuArr = []
              data.menus.forEach((item, index) => {
                // if(item.permission=='#attendance'){
                //   if(license.checkAttendanceSupport==0){
                //     MenuArr.push(item.permission)
                //   }
                // }else{
                //   MenuArr.push(item.permission)
                // }
                MenuArr.push(item.permission)
              })
              
              if (MenuArr.includes('#newDevices')) {
                this.$router.replace('/newDevices')
                return
              }
              if (MenuArr.includes('#device')) {
                // this.$router.replace('/staff')
                this.$router.replace('/device/list')
                return
              }
              if (MenuArr.includes('#staff')) {
                this.$router.replace('/staff')
                return
              }
              if (MenuArr.includes('#area')) {
                this.$router.replace('/area')
                return
              }
              if (MenuArr.includes('#attendance')) {
                this.$router.replace('/attendance')
                return
              }
              if (MenuArr.includes('#visitors')) {
                this.$router.replace('/visitors/visitorsList')
                return
              }
              if (MenuArr.includes('#temperature')) {
                this.$router.replace('/body-temperature')
                return
              }
              if (MenuArr.includes('#accessRecord')) {
                this.$router.replace('/access-record')
                return
              }
              if (MenuArr.includes('#uLog')) {
                this.$router.replace('/uLog')
                return
              }
              if (MenuArr.includes('#permissions')) {
                this.$router.replace('/permissions')
                return
              }
              if (MenuArr.includes('#version')) {
                this.$router.replace('/version')
                return
              }
              if (MenuArr.includes('#companyManagement')) {
                this.$router.replace('/companyManagement')
                return
              }
              if (MenuArr.includes('#warningMessage')) {
                this.$router.replace('/warningMessage')
                return
              }
              if (MenuArr.includes('#emailAdmin')) {
                this.$router.replace('/emailAdmin')
                return
              }
              if (MenuArr.includes('#advertising')) {
                this.$router.replace('/advertising')
                return
              }
              
            } else {
              this.$Message.warning(this.$t('loginIndex.loginLoginH'))
            }
          }
        } else {
          console.log('data123',data)
          
          // let data1=String(data)
          // console.log(data1,data1.indexOf("场所已被删除，无权限登录"))
          if(data=="用户名或密码错误"){
            this.$Message.warning(this.$t('loginIndex.loginpwdCheck8'))
          }else if(data=="权限不足"){
            this.$Message.warning(this.$t('loginIndex.loginpwdCheck7'))
          }else if(data=="账号已过期"){
            this.$Message.warning(this.$t('loginIndex.loginpwdCheck6'))
          }else if(data=="场所已被删除，无权限登录"){
            this.$Message.warning(this.$t('newDevices.loginSiteTip'))
          }else if(data=="授权文件不存在或已损坏"){
            this.$Message.warning(this.$t('loginIndex.loginpwdCheck12'))
            this.showAuthorization=true
          }else if(data=="授权已到期"){
            this.$Message.warning(this.$t('loginIndex.loginpwdCheck13'))
            this.showAuthorization=true
          }else if(data=="系统未授权"){
            this.$Message.warning(this.$t('loginIndex.loginpwdCheck14'))
            this.showAuthorization=true
          }
          else{
            this.$Message.warning(this.$t('loginIndex.loginpwdCheck5'))
          }
        }
      }
    },
    changLange () {
      let _this = this;
      let lang= _this.$i18n.locale === "zh" ? "en" : "zh";
      localStorage.setItem('language', lang);
      let togglelang = lang === "zh" ? "中文" : "English";
      this.toggle = togglelang
  		this.$i18n.locale = lang
    },
    handleFontClick (name) {
      // <DropdownItem name="Chinese">中文</DropdownItem>
      //       <DropdownItem name="English">English</DropdownItem>
      //       <DropdownItem name="traditional">繁体</DropdownItem>
      let _this = this
      // let lang = _this.$i18n.locale === "zh" ? "en" : "zh"
      // localStorage.setItem('language', lang)
      // let togglelang = lang === "zh" ? "中文" : "English"
      // sessionStorage.setItem('btnShow', togglelang)
      // this.$store.state.btnShow = togglelang
      // this.toggle = togglelang
  		// this.$i18n.locale = lang

      if (name === 'Chinese') {
        _this.toggle = '中文'
        localStorage.setItem('language', 'zh')
        sessionStorage.setItem('btnShow', 'zh')
        _this.$store.state.btnShow = 'zh'
        this.$i18n.locale = 'zh'
      } else if (name === 'English') {
        _this.toggle = 'English'
        localStorage.setItem('language', 'en')
        sessionStorage.setItem('btnShow', 'en')
        _this.$store.state.btnShow = 'en'
        this.$i18n.locale = 'en'
      } else if (name === 'traditional') {
        _this.toggle = '中文繁体'
        localStorage.setItem('language', 'zf')
        sessionStorage.setItem('btnShow', 'zf')
        _this.$store.state.btnShow = 'zf'
        this.$i18n.locale = 'zf'
      
      } else if (name === 'Japanese') {
        _this.toggle = 'わぶん'
        localStorage.setItem('language', 'ja')
        sessionStorage.setItem('btnShow', 'ja')
        _this.$store.state.btnShow = 'ja'
        this.$i18n.locale = 'ja'
      } else if (name === 'Korean') {
        _this.toggle = '한국어'
        localStorage.setItem('language', 'ko')
        sessionStorage.setItem('btnShow', 'ko')
        _this.$store.state.btnShow = 'ko'
        this.$i18n.locale = 'ko'
      }
      this.ruleInline= {
        username: [
          {
            required: true,
            message: this.$t('loginIndex.loginPhoneHint'),
            trigger: 'blur',
          },
        ],
        password: [
          {
            required: true,
            message: this.$t('loginIndex.loginPassInput'),
            trigger: 'blur',
          },
          {
            type: 'string',
            min: 6,
            message: this.$t('loginIndex.loginPhoneMin'),
            trigger: 'blur',
          },
        ],
      }
    },
    async getAcrossData  () {
      let that = this 
      const { success, data } = await getAcross ()
      if (success) {
        console.log(data)
        if (data.code == 0) {
          that.getAcross = data.msg
        }
      } else {
        this.$Message.error(this.$t('staffIndex.stafferror'))

      }
    },
  },  
}
</script>

<style lang="less" scoped>
.container {
  height: 100vh;
  padding-top: 30vh;
  background-color: @clr-theme;

  .login-wrapper {
    width: 320px;
    margin: 0 auto;
  }
  .login-wrapper .blue{
    color:#2d8cf0;
    margin-left: 10px;
  }
  .login-wrapper.across{
    width: 450px;
    padding: 5px 20px;
    box-sizing: border-box;
  }
  .login-wrapper.across /deep/ .ivu-steps-tail{
    // background-color: red;
    color: red;
  }
  .login-wrapper.across .center{
    margin: 0 auto;
    display: block;
  }
  .login-wrapper.across .small{
    padding: 10px;
    box-sizing: border-box;
  }
  .login-wrapper.across .small .ipt{
    width: 230px;
    margin-right:5px;
  }
  .login-wrapper.across .small .ipt /deep/ .ivu-input{
    font-size: 12px;
  }
  .login-wrapper.across .small .smallBtn{
    color:#2d8cf0;
  }
  .titleLeft{
    position: absolute;
    right: 20px;
    top: 0px;
    line-height: 43px;
    cursor: pointer;
    user-select:none;
  }
  .user-info {
    margin-right: 30px;
    position: absolute;
    top: 10px;
    right: 0;
    font-size: 14px;
    cursor: pointer;
    .user-name {
      margin-left: 6px;
    }
  }
}
.version{
  text-align: center;
  width: 100%;
  position: absolute;
  left: 0;
  bottom: 5px;
  color: #999;
}
</style>
